<style>
    /* 基础样式重置 */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        padding: 20px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 1.42857143;
        color: #333;
        background-color: #fff;
    }

    /* 表单容器样式 */
    #edit-form {
        max-width: 900px;
        margin: 0 auto;
    }

    /* 自定义卡片样式 */
    .my-card {
        border: 1px solid #ddd;
        border-radius: 5px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        transition: box-shadow 0.3s ease;
    }

    .my-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    }

    .my-card-header {
        background-color: #f8f9fa;
        padding: 12px 20px;
        border-bottom: 1px solid #ddd;
        font-size: 16px;
        font-weight: 600;
        color: #2c3e50;
    }

    .my-card-body {
        padding: 20px;
    }

    /* 表单组样式 */
    .form-group {
        margin-bottom: 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    label {
        display: inline-block;
        margin-bottom: 5px;
        font-weight: 500;
        color: #555;
        flex: 0 0 200px;
        max-width: 200px;
        padding-right: 15px;
    }

    .form-control {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        flex: 1;
        min-width: 200px;
    }

    .form-control:focus {
        border-color: #66afe9;
        outline: 0;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }

    /* 下拉选择框样式 */
    select.form-control {
        height: 34px;
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 16px;
    }

    /* 按钮样式 */
    .btn {
        padding: 8px 16px;
        border: 1px solid transparent;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    }

    .btn-primary {
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
    }

    .btn-primary:hover {
        background-color: #0069d9;
        border-color: #0062cc;
    }

    .btn-primary.disabled, .btn-primary:disabled {
        opacity: 0.65;
        cursor: not-allowed;
        background-color: #007bff;
        border-color: #007bff;
    }

    /* 底部按钮区域 */
    .layer-footer {
        margin-top: 30px;
        justify-content: flex-start;
        padding-left: 200px;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
        .form-group {
            flex-direction: column;
            align-items: flex-start;
        }

        label {
            flex: none;
            max-width: 100%;
            margin-bottom: 8px;
        }

        .layer-footer {
            padding-left: 0;
        }
    }
    .input-group{
        width: 77.3%;
    }
</style>

<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <!-- 通用设置卡片 -->
    <div class="my-card">
        <div class="my-card-header">通用设置</div>
        <div class="my-card-body">
            <div class="form-group">
                <label class="control-label">{:__('押金类型')}:</label>
                <div class="input-group">
                    {:build_select('row[deposit_type]', ['1'=>'押一','2'=>'押二','3'=>'押三','4'=>'押四','5'=>'固定'], $row['deposit_type'], ['class' => 'form-control'])}
                </div>
            </div>
<!--            <div class="form-group">-->
<!--                <label for="c-deposit_money" class="control-label">{:__('固定押金')}:</label>-->
<!--                <input id="c-deposit_money" data-rule="" class="form-control" name="row[deposit_money]" type="text" value="{$row.deposit_money|htmlentities}">-->
<!--            </div>-->
            <div class="form-group">
                <label class="control-label">{:__('需要抄表')}:</label>
                <div class="input-group">
                    {:build_select('row[need_cb]', ['0'=>'否','1'=>'是'], $row['need_cb'], ['class' => 'form-control'])}
                </div>
            </div>
            <div class="form-group">
                <label  class="control-label">{:__('统一交租日')}:</label>
<!--                <input id="c-rent_day_switch" data-rule="" class="form-control" name="row[rent_day_switch]" type="text" value="{$row.rent_day_switch|htmlentities}">-->
                <div class="input-group">
                    {:build_select('row[rent_day_switch]', ['0'=>'否','1'=>'是'], $row['rent_day_switch'], ['class' => 'form-control'])}
                </div>
            </div>
            <div class="form-group">
                <label for="c-rent_day" class="control-label">{:__('交租日')}:</label>
                <input id="c-rent_day" data-rule="" class="form-control" name="row[rent_day]" type="text" value="{$row.rent_day|htmlentities}">
            </div>
            <div class="form-group">
                <label for="c-ahead_day" class="control-label">{:__('提前X天交租')}:</label>
                <input id="c-ahead_day" data-rule="" class="form-control" name="row[ahead_day]" type="text" value="{$row.ahead_day|htmlentities}">
            </div>
            <div class="form-group">
                <label class="control-label">{:__('短信通知')}:</label>
<!--                <input id="c-sms_notice" data-rule="" class="form-control" name="row[sms_notice]" type="text" value="{$row.sms_notice|htmlentities}">-->
                <div class="input-group">
                    {:build_select('row[sms_notice]', ['0'=>'否','1'=>'是'], $row['sms_notice'], ['class' => 'form-control'])}
                </div>
            </div>
            <div class="form-group">
                <label for="c-welcome" class="control-label">{:__('关注欢迎词')}:</label>
                <input id="c-welcome" data-rule="" class="form-control" name="row[welcome]" type="text" value="{$row.welcome|htmlentities}">
            </div>
        </div>
    </div>

    <!-- 租客合同卡片 -->
    <div class="my-card">
        <div class="my-card-header">租客合同</div>
        <div class="my-card-body">
            <div class="form-group">
                <label for="c-one_month" class="control-label">{:__('租期1个月及以内，到期前')}:</label>
                <input id="c-one_month" data-rule="" class="form-control" name="row[one_month]" type="text" value="{$row.one_month|htmlentities}">
            </div>
            <div class="form-group">
                <label for="c-six_month" class="control-label">{:__('租期6个月及以内，到期前')}:</label>
                <input id="c-six_month" data-rule="" class="form-control" name="row[six_month]" type="text" value="{$row.six_month|htmlentities}">
            </div>
            <div class="form-group">
                <label for="c-gt_six_month" class="control-label">{:__('租期6个月以上，到期前')}:</label>
                <input id="c-gt_six_month" data-rule="" class="form-control" name="row[gt_six_month]" type="text" value="{$row.gt_six_month|htmlentities}">
            </div>
            <div class="form-group">
                <label class="control-label">{:__('自动续租')}:</label>
                <!--                <input id="c-sms_notice" data-rule="" class="form-control" name="row[sms_notice]" type="text" value="{$row.sms_notice|htmlentities}">-->
                <div class="input-group">
                    {:build_select('row[auto_pay]', ['0'=>'否','1'=>'是'], $row['auto_pay'], ['class' => 'form-control'])}
                </div>
            </div>
            <div class="form-group">
                <label for="c-ahead_auto_pay" class="control-label">{:__('到期前')}:</label>
                <input id="c-ahead_auto_pay" data-rule="" class="form-control" name="row[ahead_auto_pay]" type="text" value="{$row.ahead_auto_pay|htmlentities}">
            </div>
        </div>
    </div>

    <!-- 账单相关卡片 -->
    <div class="my-card">
        <div class="my-card-header">账单相关</div>
        <div class="my-card-body">
            <div class="form-group">
                <label class="control-label">{:__('包含押金')}:</label>
                <div class="input-group">
                    {:build_select('row[include_deposit]', ['0'=>'否','1'=>'是'], $row['include_deposit'], ['class' => 'form-control'])}
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">{:__('自动生成')}:</label>
                <div class="input-group">
                    {:build_select('row[auto_generate]', ['0'=>'否','1'=>'是'], $row['auto_generate'], ['class' => 'form-control'])}
                </div>
            </div>

            <div class="form-group">
                <label for="c-amount_decimal" class="control-label">{:__('金额保留')}:</label>
                <input id="c-amount_decimal" data-rule="" class="form-control" name="row[amount_decimal]" type="text" value="{$row.amount_decimal|htmlentities}">
            </div>
            <div class="form-group">
                <label class="control-label">{:__('余额抵扣')}:</label>
                <div class="input-group">
                    {:build_select('row[balance_deduction]', ['0'=>'否','1'=>'是'], $row['balance_deduction'], ['class' => 'form-control'])}
                </div>
            </div>
<!--            <div class="form-group">-->
<!--                <label for="c-balance_deduction" class="control-label">{:__('余额抵扣')}:</label>-->
<!--                <input id="c-balance_deduction" data-rule="" class="form-control" name="row[balance_deduction]" type="text" value="{$row.balance_deduction|htmlentities}">-->
<!--            </div>-->
            <div class="form-group">
                <label for="c-remark" class="control-label">{:__('默认备注')}:</label>
                <input id="c-remark" data-rule="" class="form-control" name="row[remark]" type="text" value="{$row.remark|htmlentities}">
            </div>
        </div>
    </div>

    <!-- 底部按钮 -->
    <div class="form-group layer-footer">
        <button type="submit" class="btn btn-primary disabled">{:__('OK')}</button>
    </div>
</form>
